<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no,minimum-scale=1,maximum-scale=1">
    <title>区块头条</title>


    <!-- 新 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">

    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="js/jquery-3.3.1.min.js" type="text/javascript"></script>
    <script src="js/jquery.color.min.js" type="text/javascript"></script>

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="bootstrap/js/bootstrap.min.js"></script>

    <!--自定义字体-->
    <link rel="stylesheet" href="css/font.css">

    <link rel="stylesheet/less" type="text/css" href="css/base.less" />
    <link rel="stylesheet" type="text/css" href="css/login.css">

    <script src="js/less.js"></script>
    <script src="js/qs.js"></script>
    <script src="js/base.js"></script>
    <script src="js/jquery.cookie.js"></script>
    <script src="js/jquery.md5.js"></script>
    <script src="js/html-params.js"></script>
    <script src="js/vue.js"></script>

    <!--各种图-->
    <!--加载Axios-->
    <script src="js/axios.min.js"></script>

    <script src="js/page/login.js"></script>
</head>
<body>
<div id="header" v-cloak="">
    <header-content></header-content>
</div>

<div id="main">
    <div class="content">
        <div id="login-content">
            <!--用户登录-->
            <div class="input-box">
                <ul class="nav nav-tabs multipart-title">
                    <li class="active" value="hour" ><a href="#user-login" data-toggle="tab" @click="changeLoginType" value="1">账户密码登录</a></li>
                    <li value="flow"><a href="#phone-login" data-toggle="tab" @click="changeLoginType"  value="2">手机验证码登录</a></li>
                </ul>
                <div class="tab-content login-content">
                    <!--账户密码登录-->
                    <div role="tabpanel" class="tab-pane active" id="user-login">
                        <div class="icon-box">
                            <img src="image/loginName.png" class="icon-img">
                            <input class="username icon-input" type="text"  @focus="setFocus('loginName',$event)" @blur="setBlur('loginName',$event)" v-model="username" placeholder="请输入您的手机号">
                            <div class="error-box "><div class="error-line hidden"><img src="image/error.png"><span class="error-msg">密码格式不对</span></div></div>
                        </div>
                        <div class="icon-box last-input">
                            <img src="image/loginPass.png" class="icon-img">
                            <input class="password icon-input" type="password"  @focus="setFocus('loginPass',$event)"  @blur="setBlur('loginPass',$event)" @keyup.enter="toLogin"  v-model="password" placeholder="请输入您的密码">
                            <img src="image/biyan.png" class="icon-img-right pointer" @click="changeShowPass" value="1">
                            <div class="error-box "><div class="error-line hidden"><img src="image/error.png"><span class="error-msg">密码格式不对</span></div></div>
                        </div>
                        <div class="text-right font-warn pointer"  @click="goResetPassword">忘记登录密码</div>
                        <div class="user-login-btn  pointer"  @click="toLogin">登录</div>
                        <div class="text-center  font-warn  pointer"  @click="goRegister">马上注册</div>
                    </div>
                    <!--手机验证码登录-->
                    <div role="tabpanel" class="tab-pane" id="phone-login">
                        <div class="icon-box">
                            <img src="image/loginPhone.png" class="icon-img">
                            <input class="phone icon-input" type="text"  @focus="setFocus('loginPhone',$event)" @blur="setBlur('loginPhone',$event)"  v-model="phone" placeholder="请输入您的手机号">
                            <div class="error-box "><div class="error-line hidden"><img src="image/error.png"><span class="error-msg">密码格式不对</span></div></div>
                        </div>
                        <div class="icon-box  last-input">
                            <img src="image/loginCode.png" class="icon-img">
                            <input class="code icon-input" type="text" v-model="code"  @focus="setFocus('loginCode',$event)" @blur="setBlur('loginCode',$event)" @keyup.enter="toLogin"  placeholder="请输入您的验证码">
                            <div class="code-btn  pointer" @click = "getCode" >获取验证码</div>
                            <div class="clearfix"></div>
                            <div class="error-box "><div class="error-line hidden"><img src="image/error.png"><span class="error-msg">密码格式不对</span></div></div>
                        </div>
                        <!--<div class="text-right font-warn pointer" @click="goResetPassword">忘记登录密码</div>-->
                        <div class="user-login-btn  pointer" @click="toLogin">登录</div>
                        <div class="text-center  font-warn  pointer" @click="goRegister">注册账户</div>
                    </div>
                </div>
            </div>
        </div>
    </div> <!-- content 结束 -->
</div> <!-- main 结束 -->

<div class="clearfix"></div>
<div id="footer">
    <footer-content></footer-content>
</div>



<!--验证码-->
<div class="modal fade" id="loginModal" tabindex="-1" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header" >
                <!--<button type="button" class="close" data-dismiss="modal">&times;</button>-->
                <button type="button" class="close" data-dismiss="modal"><img src="image/close.png"> </button>
                <p class="modal-title text-center font-size-14 padding-bottom-10">提示</p>
            </div>
            <div class="modal-body">
                <div class="text-center login-msg">为了您的安全请请先输入下列图片验证码</div>
                <div >
                    <input class="code-input" v-model="inCode" placeholder="请输入验证码">
                    <div class="codeImg"></div>
                    <div class="error-input-msg hidden" ><img src="image/error.png"><span class="error-msg"></span></div>
                    <div class="flushCode" @click="flushCode">点击刷新</div>
                    <div class="clearfix"></div>
                </div>
            </div>
            <div class="modal-footer" style="border-top:none;padding-top:0;position:relative;">
                <div class="check pointer" @click="checkCode">确定</div>
            </div>
        </div>
    </div>
</div>
</body>
</html>
